<template>
  <transition name="fade">
    <div v-if="visible" class="full-page-wraper">
      <div class="header">
        <i class="iconfont icon-fanhuifuzhi" @click="handleClose" />
        <div class="box">
          <slot name="header" />
        </div>
      </div>
      <div class="content">
        <slot name="content" />
      </div>
      <div class="footer">
        {{ $baseInfo.COPY_RIGHT }}
        <slot name="footer" />
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'FullPage',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  mounted() {
    document.body.appendChild(this.$el)
  },
  beforeDestroy() {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleFullClose', false)
    }
  }
}
</script>
<style lang="less" scoped>
.full-page-wraper{
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1111;
  display: flex;
  flex-direction: column;
  background: #f0f2f5 !important;
  overflow: hidden;
  // min-width: 1200px;
  .header{
    margin-bottom: 10px;
    min-height: 50px;
    padding: 0px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    .icon-fanhuifuzhi {
      font-size: 25px;
      padding: 0 10px;
      cursor: pointer;
      color:#2178FB;
    }
    .box{
      flex: 1;
    }
  }
  .content{
    flex: 1;
    padding: 0px 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .footer{
    height: 32px;
    background: #f0f2f5;
    color: #999;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
